<template>
    <div v-loading="loading" element-loading-text="Loading..." element-loading-background="rgba(0, 0, 0, 0.7)"
        class="login-page">

        <!-- 登录表单卡片 -->
        <div class="login-box">
            <h2>欢迎登录</h2>
            <p class="subtitle">VerEasyHub</p>
            <el-form :model="form" :rules="rules" ref="loginForm" label-width="0">
                <el-form-item prop="loginName">
                    <el-input autocomplete="off" v-model="form.loginName" placeholder="登录名">
                        <template #prefix>
                            <Icon icon="marketeq:user" width="20" height="20" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="loginPwd">
                    <el-input autocomplete="new-password" v-model="form.loginPwd" placeholder="密码" show-password>
                        <template #prefix>
                            <Icon icon="marketeq:lock" width="20" height="20" />
                        </template>
                    </el-input>
                </el-form-item>

                <div class="options">
                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                    <router-link to="/" class="forgot-password">忘记密码？</router-link>
                </div>

                <el-button style="width: 100%;" type="primary" block @click="onSubmit">登录</el-button>

                <el-divider>或</el-divider>

                <div class="social-login">
                    <el-button v-if="three" type="primary" circle>
                        <template #icon>
                            <Icon icon="basil:qq-outline"></Icon>
                        </template>
                    </el-button>
                    <el-button v-if="three" type="success" circle>
                        <template #icon>
                            <Icon icon="basil:wechat-solid"></Icon>
                        </template>
                    </el-button>

                    <div class="signIn">
                        <span>没有账号?<span class="signIn_to">立即注册</span></span>
                    </div>
                </div>

            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { useRouter } from 'vue-router';

const router = useRouter()
const three = ref(false)

import { LoginJwt, GetUserInfo, dynamicRoutes } from '../utils/api';

const loading = ref(false)
// 使用 reactive 创建表单数据
const form = reactive({
    loginName: '',
    loginPwd: '',
});

// 表单验证规则
const rules = {
    loginName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
    loginPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

// 记住我
const rememberMe = ref(false);

// 表单引用
const loginForm = ref(null);

// 提交表单
const onSubmit = async () => {

    const valid = await new Promise((resolve, reject) => {
        loginForm.value.validate((valid) => {
            if (!valid) {
                ElMessage.error('请完善必填项');
                return (new Error('请完善必填项'));
            } else {
                resolve(valid);
            }
        })
    });

    if (valid) {
        loading.value = true
        if (await LoginJwt(form) && await GetUserInfo()) {
            if (await dynamicRoutes(router)) {
                router.push('/')
            }
        }
        loading.value = false
    }

};
</script>


<style scoped>
/* 页面背景 */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('/public/791.jpg');
    background-size: cover;
    background-position: center;
}

/* 登录卡片 */
.login-box {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.6s ease-in-out;
}

.login-box h2 {
    margin-bottom: 10px;
    color: #333;
}

.subtitle {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #666;
}

.options,
.signIn {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #666;
}

.signIn {
    margin-bottom: 0px;
}

.signIn_to {
    cursor: pointer;
    text-decoration: none;
    color: #007bff;
}


.forgot-password {
    text-decoration: none;
    color: #007bff;
}

.forgot-password:hover,
.signIn_to:hover {
    text-decoration: underline;
}

:deep(.el-divider__text) {
    padding: 0px;
}

/* 社交登录 */
.social-login {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-login .el-button {
    font-size: 1.5rem;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>